<template>
	<view class="passwordPage">
		<input type="text" v-model="oldPassword" placeholder="输入旧密码" @confirm="hideKeyboard" placeholder-class="placeholder" />
		<input type="text" v-model="newPassword" placeholder="输入新密码" @confirm="hideKeyboard" placeholder-class="placeholder" />
		<input type="text" v-model="confirmPassword" placeholder="输入确认密码" @confirm="hideKeyboard" placeholder-class="placeholder" />
		<button :disabled="disabled" class="complete" hover-start-time=15 hover-stay-time=200 hover-class="bgColoroutComplete"
		 @tap="submit">完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: void 0,
				newPassword: void 0,
				confirmPassword: void 0
			};
		},
		computed: {
			disabled() {
				// 三个输入框都有内容时，才能解除禁用
				if (this.oldPassword && this.oldPassword && this.confirmPassword) {
					return false;
				};
				return true;
			},
		},
		methods: {
			hideKeyboard() {
				// 隐藏软键盘
				uni.hideKeyboard();
			},
			// 验证前后两次密码的输入内容是否相等
			check() {
				// 判断密码长度
				if (this.confirmPassword.length < 6) {
					uni.showToast({
						title: "密码长度不能小于6位",
						icon: "none"
					});
					return false;
				};
				// 判断密码是否一致
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					});
					return false;
				};
				return true;
			},
			// 点击提交密码时
			submit() {
				if (this.check()) {
					uni.showToast({
						title: "提交成功",
						icon: "none"
					});
				};
			},
		}
	}
</script>

<style lang="scss">
	.passwordPage {
		input {
			padding: 20rpx 25rpx;
			font-size: 1.1rem;
			color: #909090;
			// color: #C7C7C7;
			border-bottom: 1rpx solid #E5E5E5;
		}
	}

	.placeholder {
		color: #C7C7C7;
	}

	.complete {
		letter-spacing: 10rpx;
		border-radius: 16rpx !important;
		margin: 150rpx 30rpx 0rpx;
		font-size: 1.1rem !important;
		background-color: #F6F6F6;
		color: #A7A5A3;
		border: 2rpx solid #E9E9E9 !important;
	}

	.bgColoroutComplete {
		border: 2rpx solid #E9E9E9 !important;
		background-color: #E5E5E5 !important;
	}
</style>
